'use client'

import { useState } from 'react'
import { Bell, User, LogOut } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { usePathname, useRouter } from 'next/navigation'

export default function Header() {
  const router = useRouter()
  const [user, setUser] = useState({ name: '管理员' })
  const pathname = usePathname()

  const getNavigation = () => {
    const paths = pathname.split('/').filter(Boolean)
    
    // 定义数据概览相关的路径
    const dataOverviewPaths = ['', 'video-analysis', 'makeup-analysis']
    
    // 基础路径映射
    const pathMap: { [key: string]: string } = {
      '': '用户分析',
      'video-analysis': '视频分析',
      'makeup-analysis': '妆造分析',
      'users': '用户管理',
      'billing': '计费管理',
      'settings': '系统设置'
    }

    // 构建导航路径
    const navigation = ['管理后台']
    
    // 如果是数据概览相关页面，添加数据概览层级
    if (dataOverviewPaths.includes(paths[0] || '')) {
      navigation.push('数据概览')
    }
    
    // 添加具体页面名称
    if (paths.length > 0) {
      navigation.push(pathMap[paths[0]] || paths[0])
    } else {
      navigation.push(pathMap[''] || '用户分析')
    }

    return navigation
  }

  const handleLogout = () => {
    localStorage.removeItem('isLoggedIn')
    document.cookie = 'isLoggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
    router.push('/login')
  }

  return (
    <header className="bg-white shadow-md py-4 px-6 flex justify-between items-center min-h-[4rem]">
      <div className="flex items-center space-x-2 text-gray-600">
        {getNavigation().map((item, index) => (
          <div key={index} className="flex items-center">
            {index > 0 && <span className="mx-2 text-gray-400">/</span>}
            <span className={index === getNavigation().length - 1 ? "text-gray-800" : ""}>{item}</span>
          </div>
        ))}
      </div>
      <div className="flex items-center space-x-4">
        <Button variant="ghost" size="icon">
          <Bell className="h-5 w-5" />
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="flex items-center space-x-2">
              <User className="h-5 w-5" />
              <span>{user.name}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={handleLogout}>
              <LogOut className="mr-2 h-4 w-4" />
              <span>登出</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  )
}

